<template>
  <div class="classify">
    <van-tabs v-model="active" class="nav" @click="onClick()">
      <van-tab :title="v.navigationName" v-for="v in navList" :key="v.id"></van-tab>
    </van-tabs>
    <!-- 导航条详细内容 -->
    <div class="content">
      <div v-for="v in recommend" :key="v.id" @click="play(v)" class="item">
        <div class="img_div">
          <img :src="v.albumPicUrl" alt="">
        </div>
        <div class="div_info">
          <p>歌曲：{{v.musicName}}</p>
          <p>专辑：{{v.albumName}}</p>
          <p>歌手：{{v.artistName}}</p>
          <!-- <p>类型：{{v.navigationName}}</p> -->
        </div>
      </div>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 50px'}">
      没有更多了
      </van-divider>
    </div>
  </div>
</template>

<script>

import url from '../tools/url'
export default {
  name: 'Classify',
  data () {
    return {
      active:0,
      navList:[],
      recommend:[]
    }
  },
  methods: {
    // 播放音乐
    play(v){
      this.$store.commit("savemusic",v);
    },
    onClick(){
      var token = sessionStorage.getItem("token");
      var id = this.active+1;
      if (id==1) {
            this.axios.post("api3"+url.RECOMMEND,`token=${token}`).then(res=>{
              if (res.data.code == 200) {
                console.log(res);
                this.recommend = res.data.data;
              }else{
                this.$router.push("/login").catch(e=>{});
              }
            })
      }else{
        var str = `token=${token}&id=${id}`;
        this.axios.post("api3"+url.FINDMUSIC,str).then(res=>{
          if (res.data.code == 200) {
            this.recommend = res.data.data;
          }else{
            this.$router.push("/login").catch(e=>{});
          }
        });
      }
      
    
    }
  },
  mounted() {
    // 请求导航栏标题 
    var token = sessionStorage.getItem("token");
    this.axios.post("api3"+url.NAV,`token=${token}`).then(res=>{
      if (res.data.code == 200) {
        this.navList = res.data.data;
      }else{ 
        this.$router.push("/login").catch(e=>{});
      }
    });
    // 获取推荐的内容
    this.axios.post("api3"+url.RECOMMEND,`token=${token}`).then(res=>{
      if (res.data.code == 200) {
        console.log(res);
        this.recommend = res.data.data;
      }else{
        
      }
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.nav{
  top: 0;
  z-index: 99;
  position: fixed;
}
.content{
  margin-top: 45px;
  margin-bottom: 80px;
}
.div_info{
  margin-left: 7%;
  margin-top: 15px;
}
.item{
  display: flex;
  margin-top: 5px;
  background-color: white;
}
.img_div{
  width: 30%;
}
.img_div img{
  width: 100%;
  border-radius: 10px;
}
.bottom_p{
  text-align: center;
  color: aquamarine;
}
</style>
